<template>
  <el-menu :default-active="ActivePath" class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#304156"
    @open="handleOpen" @close="handleClose" :router="true" unique-opened>
    <div class="logo-box">
      <img src="@/assets/img/logo.png" alt="">
      <span>智慧点餐系统</span>
    </div>
    <template v-for="item in menus">
      <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
        <template #title>
          <el-icon>
            <!-- 修改为绑定图标组件 -->
            <component class="menu-icon" :is="iconMap[item.icon]" />
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="childItem in item.children" :index="childItem.path">{{childItem.title}}</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        <el-icon>
          <!-- 修改为绑定图标组件 -->
          <component class="menu-icon" :is="iconMap[item.icon]" />
        </el-icon>
        <span>{{item.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { HomeFilled, Briefcase, Menu, List, Shop, TrendCharts } from '@element-plus/icons-vue'
import {computed} from 'vue'
import{useRoute} from 'vue-router'
const route = useRoute();

// 创建图标映射
const iconMap = {
  HomeFilled,
  Briefcase,
  Menu,
  List,
  Shop,
  TrendCharts
}

const menus = [
  // 首页
  {
    path: '/home',
    component: () => import('@/views/home/Home.vue'),
    title: '首页',
    icon: 'HomeFilled'
  },
  //   账号模块
  {
    path: '/account',
    title: '账号管理',
    icon: 'Briefcase',
    children: [
      {
        path: '/accountList',
        component: () => import('@/views/account/AccountList.vue'),
        title: '账号列表'
      },
      {
        path: '/accountAdd',
        component: () => import('@/views/account/AccountAdd.vue'),
        title: '添加账号'
      },
      {
        path: '/accountCenter',
        component: () => import('@/views/account/AccountCenter.vue'),
        title: '个人中心'
      },
      {
        path: '/accountEdit',
        component: () => import('@/views/account/AccountEdit.vue'),
        title: '修改密码'
      }
    ]
  },
  //   商品模块
  {
    path: '/goods',
    title: '商品管理',
    icon: 'Menu',
    children: [
      {
        path: '/goodsList',
        component: () => import('@/views/goods/GoodsList.vue'),
        title: '商品列表'
      },
      {
        path: '/goodsAdd',
        component: () => import('@/views/goods/GoodsAdd.vue'),
        title: '商品添加'
      },
      {
        path: '/goodsType',
        component: () => import('@/views/goods/GoodsType.vue'),
        title: '商品分类'
      }
    ]
  },
  //   订单模块
  {
    path: '/orderList',
    title: '订单管理',
    icon: 'List'
  },
  //   店铺模块
  {
    path: '/shopInfo',
    title: '店铺管理',
    icon: 'Shop'
  },
  //   统计模块
  {
    path: '/statistics',
    title: '统计数据',
    icon: 'TrendCharts',
    children: [
      {
        path: '/goodsStatistics',
        title: '商品统计'
      },
      {
        path: '/statisticsOrder',
        title: '订单统计'
      }
    ]
  },
  //   权限管理
  {
    path: '/permission',
    title: '权限管理',
    icon: 'TrendCharts',
    // 权限管理
    children: [
      {
        path: '/permissionInfo',
        title: '权限管理'
      },
      {
        path: '/rolePermission',
        title: '角色管理'
      }
    ]
  }
]; 
const ActivePath =  computed(()=>{
    return route.path
 })
</script>

<style lang="scss" scoped>
:deep(.el-menu-item-group__title) {
  padding: 0;
}

:deep(.el-menu) {
  width: 200px;
  height: 100%;
  background-color: #304156;
  color: #fff;
  border-right: none;
}

.logo-box {
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  span {
    width: 96px;
    height: 16px;
    margin-left: 10px;
    font-size: 16px;
    color: #fff;
  }
}

:root {
  --el-menu-hover-bg-color: red;
}

.el-menu-item:hover {
  background-color: var(--el-menu-hover-bg-color);
}

.el-menu-item {
  color: #fff;
}

.el-sub-menu {
  color: #fff;
}

.el-menu-item i {
  color: #909399;
}

.el-sub-menu__title i {
  color: #909399;
}

:deep(.el-sub-menu__title) {
  color: #fff;
}

:deep(.el-menu-item.is-active) {
  color: #409eff;
}
</style>